<template>
	<view class="content">
		<!--f1:自定义导航栏(uni-navbar)-->
		<!--f2:停车位分布地图  百度地图 高德地图 腾讯地图 谷歌地图..-->
		<!--longitude	Number		中心经度	 -->
		<!--latitude	Number		中心纬度	 -->
		<!--scale	Number	16	缩放级别，取值范围为3-20 ,数值越大显示越少越精细-->
		<map
			id="parkingMap"
			class="parking-map"
			longitude="116.42"
			latitude="40.063"
			scale="15"
			:markers="mapMarkers"
			:style="{ height: mapHeight + 'px' }"
			@markertap="doMakerTap"
		></map>
		<!--f3:小区剩余车位统计图-->
		<qiun-data-charts :style="{ marginTop: '30px', height: chartHeight + 'px' }" type="column" :chartData="chartData" @getIndex="clickIndex"></qiun-data-charts>
	</view>
</template>

<script>
import { parkingZoneList } from '@/service/index.js';
export default {
	data() {
		return {
			parkingZones: [], //从服务器中获取到的停车数据
			mapMarkers: [], //地图上要显示的小图标
			chartData: {}, //图表数据
			chartHeight: 300, //图表高度
			mapHeight: 0 //地图高度
		};
	},
	async onLoad() {
		//获取屏幕高度，计算出地图区域高度
		let info = uni.getSystemInfoSync();
		this.mapHeight = info.windowHeight - this.chartHeight;

		//ajax异步访问服务器，获取停车数据
		this.parkingZones = await parkingZoneList();

		//通过停车数据，计算得到地图标点位置
		this.mapMarkers = this.parkingZones.map((pz, i) => {
			return {
				id: i,
				latitude: pz.latitude,
				longitude: pz.longitude,
				iconPath: '/static/img/loc.png',
				callout: {
					content: pz.zname + '空闲:' + pz.unoccupied,
					bgColor: '#090',
					color: '#fff'
				}
			};
		});

		//基于获取到的停车数据，绘制图表
		this.chartData = {
			categories: this.parkingZones.map(x => x.zname.substr(-2)),
			series: [
				{
					name: '空闲车位',
					data: this.parkingZones.map(x => x.unoccupied)
				}
			]
		};
	},
	methods: {
		doMakerTap(e) {
			//获取被点击的标志对应的小区信息
			let pz = this.parkingZones[e.detail.markerId];
			//获取该小区的经纬度
			let longitude = pz.longitude;
			let latitude = pz.latitude;
			//将该小区经纬度移动到地图中央
			let ctx = uni.createMapContext('parkingMap', this);
			ctx.moveToLocation({ longitude, latitude });
		},
		//点击柱状图中的不同柱,移动地图到指定小区
		clickIndex(e) {
			//得到点击的柱的索引
			let i = e.currentIndex.index;
			if (i >= 0) {
				//得到对应小区信息
				let pz = this.parkingZones[i];
				//移动地图中心到该小区经纬度
				let ctx = uni.createMapContext('parkingMap', this);
				ctx.moveToLocation({ longitude: pz.longitude, latitude: pz.latitude });
			}
		}
	}
};
</script>

<style scoped lang="scss">
.parking-map {
	width: 750rpx;
	height: 750rpx;
}
</style>
